<template>
  <div class="ck">
    <div class="header">
      <ul>
        <li><div class="head-font"></div></li>
        <li><p>&nbsp; 医生管理</p></li>
      </ul>
    </div>

    <div class="state">
      <el-form>
        <el-col>
           <span>所属机构 : </span>  
        <el-select v-model="list.doctorOrganization" placeholder="请选择">
          <el-option :label="state" :value="1">北京市怀柔区洛西社区卫生服务站</el-option>
          <el-option :label="state" :value="2">罗西社区服务中心</el-option>
          <el-option :label="state" :value="3">民进社区服务中心</el-option>
        </el-select>
           <span style=" margin-left: 50px;">所属团队 : </span>  
        <el-select v-model="list.doctorTeam" placeholder="请选择">
          <el-option :label="state" :value="1">王安然团队</el-option>
          <el-option :label="state" :value="2">王然团队</el-option>
          <el-option :label="state" :value="3">汪小敏团队</el-option>
        </el-select>
        <el-input placeholder="请输入关键字" style="width: 400px; margin-left: 50px;" suffix-icon="el-icon-search" v-model="list.doctorName"></el-input>
          <el-button style=" margin-left: 100px; border: 1px solid #0066ff; color: #0066ff; " @click="search" >搜索</el-button>          
        </el-col>
      </el-form>
    </div>

    <el-table
      style="width: 1250px; margin-top: 100px"
      :header-cell-style="{ background: 'silver', color: '#606266' }"
      :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)">
      <el-table-column width="15"> </el-table-column>
      <el-table-column type="selection" width="45"></el-table-column>
      <el-table-column label="编号" width="50px" prop="doctorId"></el-table-column>
      <el-table-column label="头像" width="80px" prop="doctorImg">
        <template slot-scope="scope">
          <img :src="scope.row.doctorImg" min-width="32" height="32"/>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="80px" prop="doctorName">
        <template slot-scope="list">
          <p v-html="list.row.doctorName"></p>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" width="120px" prop="doctorPhone"></el-table-column>
      <el-table-column label="角色" width="100px" prop="doctorRole"></el-table-column>
      <el-table-column label="所属团队" width="120px" prop="doctorTeam" :formatter="doctorTeam"></el-table-column>
      <el-table-column label="所属机构" width="120px" prop="doctorOrganization" :formatter="doctorOrganization"></el-table-column>
      <el-table-column label="状态" width="180px" prop="doctorState" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.doctorState"
            class="demo"
            :active-value="1"
            :inactive-value="2"
            active-color="#13ce66"
            active-text="启用"
            inactive-color="#CCCCCC"
            inactive-text="禁用"
            @change="changeSwitch($event, scope.row.doctorId)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="340">
        <template slot-scope="scope">
          <el-button
            @click="deleteDoctorId(scope.row.doctorId)" type="danger" icon="el-icon-delete" size="small" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 4, 6, 8, 10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px; margin-left: 150px"
      :total="list.length"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      list: [],
      currentPage: 1, //初始页
      pagesize: 2, //每页条数
    };
  },

  created() {
    this.findList();
  },

  methods: {
    findList() {
      axios({
        url: "/api/doctor/queryEsList",
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
        
      });
    },
    doctorOrganization(row, column, status, index) {
      console.log(status);
      if (status === 1) {
        return "北京市怀柔区洛西社区卫生服务站";
      } else if (status === 2) {
        return "罗西社区服务中心";
      } else if (status === 3) {
        return "民进社区服务中心";
      }
    },
    doctorTeam(row, column, status, index) {
      console.log(status);
      if (status === 1) {
        return "王安然团队";
      } else if (status === 2) {
        return "王然团队";
      } else if (status === 3) {
        return "汪小敏团队";
      }
    },
    handleSizeChange(size) {
      console.log(size, "size");
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange(currentPage) {
      console.log(currentPage, "currentPage");
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    search() {
      axios({
        url: "/api/doctor/queryEsList",
        params: {
          doctorName: this.list.doctorName,
          doctorOrganization: this.list.doctorOrganization,
          doctorTeam: this.list.doctorTeam
        },
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    deleteDoctorId(id) {
      console.log(id); //e是html页面中传递过来本条数据的id
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          let that = this; //改变this指向
          axios
            .get("/api/doctor/deleteDoctorId", {
              params: {
                id: id,
              },
            })
            .then(function (res) {
              //判断success是否为true
              if (res.succeed === false) {
                that.$message({
                  type: "info",
                  message: "删除失败!",
                });
              } else {
                that.$message({
                  type: "success",
                  message: "删除成功!",
                });
                
                location.reload();
                this.$options.created.findList()
                
              }
            })
            .catch(function (reason) {
              console.log(reason);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击修改状态
    changeSwitch($event, id) {
      console.log(id);
      // alert($event)
      if ($event == 2) {
        //禁用
        this.$confirm("确认禁用吗？", "操作确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        this.$axios({
          url: "api/doctor/updateState",
          mounted: "GET",
          params: {
            id: id,
            state: 2,
          },
        });
      } else {
        //启用
        this.$confirm("确认启用吗？", "操作确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        this.$axios({
          url: "api/doctor/updateState",
          mounted: "GET",
          params: {
            id: id,
            state: 1,
          },
        });
      }
    },
  },
};
</script>

<style>
.ck {
  width: 1250px;
  height: 980px;
}
.header ul {
  width: 1250px;
  height: 50px;
  background-color: #f2f7fb;
  display: flex;
  padding-top: 20px;
  padding-left: 30px;
}
.header ul p {
  font-size: 22px;
}
.head-font {
  background-color: #0066ff;
  width: 7px;
  height: 25px;
  border-radius: 10px;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.state {
  margin-top: 15px;
}

.demo .el-switch__label {
   position: absolute;
   display: none;
   color: #fff;
 }
 /*打开时文字位置设置*/
 .demo .el-switch__label--right {
   z-index: 1;
   right: 6px;
 }
 /*关闭时文字位置设置*/
 .demo .el-switch__label--left {
   z-index: 1;
   left: 6px;
 }
 /*显示文字*/
 .demo .el-switch__label.is-active {
   display: block;
 }
.demo.el-switch .el-switch__core,
.el-switch .el-switch__label {
   width: 52px !important;
 }
</style>